<template>
    <div class="wrapper">
        <div class="header">
            <div class="left-item">
                <img v-if="userInfo && userInfo.photo" :src="userInfo && userInfo.photo">
                <img v-else src="http://47.75.99.213/app/cdn/default-headImg.png">
                <span>昵称 : {{ userInfo && userInfo.name }}</span>
            </div>
            <div class="right-item" @click="$router.push('/account/myInfo')">
                <img src="http://47.75.99.213/app/cdn/icon-setting.png">编辑
            </div>
        </div>
        <div class="banner">
		    <div class="img"><img src="http://47.75.99.213/app/cdn/my-bg.png"></div>
            <div class="svg">
                <svgpath :todayValue="userInfo && userInfo.everyDayDlb" :endValue="userInfo && userInfo.historyDlbCount"></svgpath> 
            </div>
            <div class="read-info">
                <div>今日阅读<br/>{{userInfo && userInfo.everyDayReadTime}}</div>
                <div>今日文章<br/>{{userInfo && userInfo.everyDayReadNumer}}</div>
                <div>累计阅读<br/>{{userInfo && userInfo.readTimeCount}}</div>
            </div>
        </div>
        <div class="list">
            <mt-cell title="钱包" icon="more" is-link  @click.native="$router.push('/account/wallet')">
                <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-wallet.png" alt="">
            </mt-cell>
            <mt-cell title="邀请好友" icon="more"  is-link @click.native="changeToInvite">
                <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-yao.png" alt="">
            </mt-cell>
            <mt-cell title="设置" icon="more"  is-link  @click.native="$router.push('/account/setting')">
                <img slot="icon" class="icon" src="http://47.75.99.213/app/cdn/icon-set.png" alt="">
            </mt-cell>
        </div>
  </div>
</template>

<script>
import svgpath from "@/components/SvgPath"
import { MessageBox } from 'mint-ui';
import { mapGetters } from 'vuex'
import { getInfo } from '@/api/login'
export default {
    data(){
        return{
            
        }
    },
    components:{
        svgpath
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    mounted(){
        this.GetInfo();
    },
    methods:{
        GetInfo(){
            this.$store.dispatch('GetInfo');
        },
        changeToInvite(){            //跳转到邀请好友界面
            //公测期间暂未开放
            MessageBox({
                title:'',
                message: '公测期间暂未开放',
                closeOnClickModal:true
            });
            // this.$router.push('/account/invite');
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    position:relative;
    .header{
        position: absolute;
        top:0;
        border-bottom: 1px solid transparent;
        background:transparent;
        height:47px;
        margin-top: 16px;
        z-index:999;
        padding:0 15px;
        width:100%;
        display: flex;
        .left-item{
            height:47px;
			line-height: 47px;
			color:#fff;
			border-bottom: 1px solid transparent;
            display: flex;
            width:100%;
            img{
                width:45px;
                height:45px;
                border-radius:50%;
            }
            span{
                margin-left:10px;
                width: 75%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
		}
        .right-item{
			width:60px;
			height: 47px;
            line-height: 47px;
            color:#fff;
            font-size:13px;
            img{
                width:16px;
                height:16px;
                display: inline-block;
                vertical-align: sub;
                margin-right:5px;
            }
		}
    }
    .banner{
        position: relative;
        .svg{
			width:100%;
			position: absolute;
			top: 30%;
		}
        .read-info{
			height:auto;
			line-height: 18px;
			position: absolute;
			bottom:5px;
			text-align: center;
			color:#fff;
			border-bottom: 1px solid transparent;
            display:flex;
            width:100%;
            &>div{
                flex:1;
            }
		}
    }
    .list{
        padding-top:15px;
    } 
}
</style>
